CSS: white-space

GPT-4.icon

連続する空白文字（スペース、タブ、改行など）は1つのスペースとして扱われます。

テキストはコンテナの境界を超えると自動的に折り返されます。

連続する空白文字は1つのスペースとして扱われます。

テキストは折り返されず、コンテナの境界を超えても一行に表示され続けます。

連続する空白文字はそのままの形で表示されます（HTMLの <pre> タグのように）。

テキストは手動で挿入された改行やコンテナの境界でのみ折り返されます。

pre-wrap

連続する空白文字はそのままの形で表示されます。

テキストは手動で挿入された改行やコンテナの境界で折り返されます。

連続する空白文字は1つのスペースとして扱われます。

テキストは手動で挿入された改行やコンテナの境界で折り返されます。

全角と半角で折返しの挙動が異なる場合がある

これが理由？

とくに，日本語の全角文字列 の場合は，

「一文字ごとに英文の半角スペースが挟まれているとみなした取り扱い」

code:ts

type Props = React.ComponentProps<'input'> & {

unit?: string;

};

export const TextField = forwardRef<HTMLInputElement, Props>(

({ className, unit, ...props }, ref) => {

return (

<div className={cx(className, 'flex gap-1 border border-gray-300')}>

<input {...props} className="w-full px-4 py-2" ref={ref} />

{unit != null && (

<div className="flex items-center bg-white pr-4">

<span className="text-sm text-gray-500">

{/* <span className="whitespace-nowrap text-sm text-gray-500"> */}

{unit}

</span>

</div>

)}

</div>

);

},

);

半角のみを指定した場合は横に並ぶが、

全角が含まれると縦に並ぶ場合がある

コメントアウトしてる行を採用すれば直った